<template>
  <div class="delivery-address">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="label">配送至</div>
      </el-col>
      <el-col :span="18">
        <div class="address-container">
          <div class="address">{{ address }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-button class="cancel-button" @click="$router.replace('/shop')">取消</el-button>
      </el-col>
      <el-col :span="12">
        <el-button class="order-button" type="success" @click="buy">立即下单</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ElNotification } from 'element-plus'
import { ref } from 'vue'

const emit = defineEmits(['buy'])

const address = ref()

const changeAddress = (value) => {
  address.value = value
}

const buy = () => {
  if (address.value === '') {
    ElNotification({
      title: '错误',
      message: '请至少选择一个地址',
      type: 'error',
    })
    return
  }
  emit('buy')
}

defineExpose({
  changeAddress,
})
</script>

<style scoped less="scss">
.delivery-address {
  padding: 20px;
  background-color: #f5faf6;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  .el-row {
    display: flex;
    align-items: center;
  }

  .label {
    font-weight: bold;
  }

  .address-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  .address {
    color: #333;
  }

  .el-button {
    width: 100%;
  }

  .cancel-button {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
  }

  .order-button {
    background-color: #67c23a;
    border: none;
    color: #fff;
  }
}
</style>
